<template>
    <l-panel style="padding: 0px">
      <template #toolLeft>
        <div class="l-panel--item">
          <el-input
            :placeholder="$t('请输入关键字')"
            @keyup.enter.native="handleSearch"
            v-model="queryData.f_Theme"
            size="mini"
          >
            <el-button
              @click="handleSearch"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </div>
      </template>
  
      <l-table
      ref="mainTable"
      :loading="tableLoading"
      :columns="columns"
      :dataSource="tableData"
      :isPage="true"
      :pageTotal="tableTotal"
      :tablePage.sync="tableCurrentPage"
      @loadPageData="turnTablePage"
    >
    </l-table>
  </l-panel>
</template>
<script>
const api = window.$api.erpcase.outstorelog;
export default {
  props: {
    materialId: String,
  },
  data() {
    return {
      // 查询参数
      queryData: {
        f_Theme: "",
      },
      queryItems: [
        { label: "主题", prop: "f_Theme" },
      ],

      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        { label: "出库单号", prop: "f_Number", minWidth: 120, align: "left" },
        {
          label: "出库主题",
          prop: "f_Theme",
          minWidth: 120,
          align: "left",
          dataType: "input",
        },
        {
          label: "出库日期",
          prop: "f_Date",
          width: 120,
          align: "left",
          dataType: "datetime",
          format: "yyyy-MM-dd",
        },
        { label: "数量", prop: "f_Count", width: 100, align: "left" },
        {
          label: "出库人员",
          prop: "f_Person",
          width: 120,
          align: "left",
          dataType: "user",
        },
        {
          label: "出库仓库",
          prop: "f_Store",
          width: 120,
          align: "left",
          dataType: "dataSource",
          dataCode: "ERP_WareHouses",
          valueKey: "f_id",
          labelKey: "f_name",
          isNotAutoWrap: true,
        },
      ],
    };
  },
  computed: {
    storeOptions() {
      const data = this.lr_DataSource("ERP_WareHouses");
      return this.lr_DataSourceOptions(data, "f_id", "f_name");
    },
  },
  watch: {
    materialId: {
      handler() {
        this.init();
      },
      immediate: true,
    },
  },
  methods: {
    init() {
      this.loadTableData();
    },
    handleSearch() {
      this.loadTableData();
    },

    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);

      queryData.f_MaterialId = this.materialId;
      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "f_Date DESC";
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },
  },
};
</script>